<template>
  <view id="sales-task">
    <view class="task-time-box">
      <view class="left-box">
        <view class="title">任务倒计时</view>
        <view class="time-box">
          <text class="time">{{ taskHourTime }}</text>:
          <text class="time">{{ taskMinuteTime }}</text>:
          <text class="time">{{ taskSecondTime }}</text>
        </view>
        <view class="account">账号：{{ list.tb_name }}</view>
      </view>
      <view class="give-up-btn" @click="showGiveUpTaskModal = true" >放弃任务</view>
    </view>
    <!-- 平台类型-->
    <view class="card">
      <view class="card-title">
        <view class="title shop-name">{{ getShopName2(list.shop_type) }}</view>
      </view>
    </view>
    <!-- 任务详情-->
    <view class="card" v-for="(de, deIndex) in  list.deputyTaskIfo" :key="deIndex">
      <!-- 商品详情-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-goods"></view>
          <view class="title">目标商品</view>
        </view>
        <view class="card-content">
          <view class="goods-title" >{{ de.goods_title }}</view>
          <view class="goods-info">
            <canvas class="goods-img" :canvas-id="'firstCanvas' + deIndex">{{ getNewGoodsImg('firstCanvas' + deIndex,de.goods_img)}}</canvas>
            <view class="goods-param-box">
              <view class="goods-param">{{ getShopName(list.shop_type) }}：
                <text class="content">{{ list.shop_name }}</text>
              </view>
              <view class="goods-param">搜索展示价格：
                <text class="content-price">{{ de.showMoney }}</text>
              </view>
<!--              <view class="goods-param">销量：-->
<!--                <text class="content">约{{ list.pay_person }}人付款</text>-->
<!--              </view>-->
              <view class="goods-param">地址：
                <text class="content">{{ list.goods_address ? list.goods_address : "暂无" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 任务要求-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-task-request"></view>
          <view class="title">任务要求</view>
        </view>
        <view class="card-content">
          <view class="card-row-container">
            <view class="row-title">
              拍下单价：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              购买数量：
            </view>
            <view class="row-content">
              <view class="theme-style">{{ de.buy_num }} 件</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              应付总金额：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.buy_num * de.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              拍下的商品规格：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.sku }}</view>
            </view>
          </view>
<!--          <view class="card-row-container">-->
<!--            实付金额：-->
<!--            <view class="input-box">-->
<!--              <input class="input" placeholder="请输入实际付款金额" type="text" v-model="de.truePay" />-->
<!--            </view>-->
<!--          </view>-->
        </view>
      </view>
    </view>

    <!-- 商家要求-->
    <view class="card" style="background:#99cc33">
      <view class="card-title">
        <view class="icon-style el-icon-ali-note-1"></view>
        <view class="title">商家要求</view>
      </view>
      <view class="card-content">
        <view class="card-row-container" style="border-bottom: 0;">
          <view class="row-content">
            <view class="black-style" style="color: red;font-size:24upx;line-height:30px">{{ list.remark }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索关键词-->
    <view class="card">
      <view class="card-title">
        <view class="icon-style el-icon-ali-search-key"></view>
        <view class="title">搜索关键词</view>
      </view>
      <view class="card-content">
        <view class="qrcode-box" v-if="list.entrance_type == 3">
          <view class="note">
            长按保存图片，{{
              tbTm.indexOf(list.shop_type) >= 0 ? storeName[list.shop_type] : "微信"
            }}扫一扫打开
              <!--tbTm.indexOf(list.shop_type) >= 0 ? "淘宝app" : "微信"-->
          </view>
          <view>
            <image @longtap="saveImg(list.keyword)" class="qrcode-img" :src="list.keyword" mode=""></image>
          </view>
        </view>
        <view class="card-row-container" v-else>
          <view class="row-title">
            {{ entranceName[list.entrance_type] }}:
          </view>

          <view class="row-content">
            <view class="keyword-text" v-if="keywordOptType == 1">{{ list.keyword }}</view>
            <view class="theme-style" v-else @click="copyKeyword(list.keyword)">
              <view class="keyword">{{ list.keyword }}</view>
              <view class="pinyin" v-if="!isLetter">
                <text class="letter" v-for="(py, pyIndex) in pyArr" :key="pyIndex">{{ py.py }}</text>
              </view>
            </view>
            <view class="copy-btn-box" v-if="copyShowType.indexOf(list.entrance_type) >= 0">
              <view class="copy-btn" v-if="keywordOptType == 1" @click="copyKeyword(list.keyword)">复制</view>
            </view>
          </view>
        </view>
        <view class="qrcode-box" v-if="list.keyword!==''&&list.keyword!==null&&(list.shop_type==1||list.shop_type==2)">
          <view class="note">
            请使用淘宝APP扫码
          </view>
          <view>
            <image @longtap="saveImg(list.qr_img)" class="qrcode-img" :src="list.qr_img" mode=""></image>
          </view>
        </view>
        <!-- <view class="card-row-container">
					<view class="row-title">
						商品规格:
					</view>
					<view class="row-content">
						<view class="black-style">{{list.sku}}</view>
					</view>
				</view>
				<view class="require-box" style="margin-top: 32upx;">
					<view class="require-icon el-icon-ali-task-request"></view>
					<view class="require-content">
						商家要求：{{list.remark}}
					</view>
				</view> -->
      </view>
    </view>


    <view class="card" v-if="shopNameConfig == 1">
      <view class="card-title">
        <view class="icon-style el-icon-ali-check"></view>
        <view class="title">核验店铺</view>
      </view>
      <view class="card-content">
        <view class="card-input-box">
          <view class="input-box">
            <input class="input" placeholder="请输入店铺名称进行核对" type="text" v-model="checkShopName" />
            <image v-show="checkShopName" class="clear-btn" @click="checkShopName = ''" src="../../static/img/clear.png" mode=""></image>
          </view>
          <button class="check-btn" @click="submitCheckShopName">核对</button>
        </view>
        <view class="tips marginStyle" v-if="checkShopNameStatus">核对成功 店铺：{{ shopNameText }}</view>
      </view>
    </view>
    <view class="card" v-if="checkShopNameStatus">
      <view class="card-title">
        <view class="icon-style el-icon-ali-check"></view>
        <view class="title" v-if="stickType === 4">核验店铺名</view>
        <view class="title" v-else>核验商品</view>
      </view>
      <view class="card-content">
        <view class="shop-name-box shop-name">{{ getShopName(list.shop_type) }}商家店铺名：
          <text class="name shop-name">{{ list.shop_name }}</text>
        </view>
        <view class="tips" v-if="list.shop_type == 3 || list.shop_type == 13">{{ list.goods_wpgpdd_show }}</view>
        <view class="card-row">
          <view class="card-input-box">
            <view class="input-box">
              <input class="input" :placeholder="stickTypeData[stickType]" type="text" v-model="tbPassword" />
              <image v-show="tbPassword" class="clear-btn" @click="tbPassword = ''" src="../../static/img/clear.png" mode=""></image>
            </view>
            <button class="check-btn" @click="matchGoods">
              {{ checkBtnTitle[stickType] }}
            </button>
          </view>
          <view class="tips marginStyle" v-if="taskForm.shopStatus">核对成功 店铺：{{ shopNameText }}</view>
          <view class="require-box marginStyle">
            <view class="require-icon el-icon-ali-task-request"></view>
            <view class="require-content" style="color:red;font-size:18px">
              差额正负50可以下单 ！
              <!-- {{ list.goods_check_show }} -->
            </view>
          </view>
        </view>
        <view
          class="card-row"
          v-if="shopDetailText.indexOf(list.shop_type) >= 0 && list.check_content">
          <view class="note">请在商品详情页找到缺少的1个字填入</view>
          <view class="center-text-box">{{ originalBeforeText }}<input
              class="center-text-input"
              type="text"
              v-model="writeCenterText"
            />{{ originalAfterText }}</view
          >

          <view class="require-box">
            <view class="require-icon el-icon-ali-task-request"></view>
            <view class="require-content" style="color:red;font-size:18px">
              差额正负50可以下单 ！
              <!-- {{ list.goods_answer_show }} -->
            </view>
          </view>
        </view>
        <view v-if="taskForm.shopStatus">
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                实付金额：
              </view>
              <view class="input-box">
                <input
                  class="input"
                  placeholder="请输入实际付款金额"
                  type="text"
                  v-model="taskForm.otherPay"
                />
                <image
                  v-show="taskForm.otherPay"
                  class="clear-btn"
                  @click="taskForm.otherPay = ''"
                  src="../../static/img/clear.png"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                付款截图：
              </view>
              <view class="upload-img-box" @click="chooseImage">
                <image
                  class="upload-img"
                  :src="taskForm.payImg"
                  mode=""
                  v-if="taskForm.payImg"
                ></image>
                <view class="upload-icon el-icon-ali-upload-img" v-else></view>
              </view>
            </view>
          </view>
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                订单号：
              </view>
              <view class="input-box">
                <input
                  class="input"
                  placeholder="请输入订单号"
                  type="text"
                  v-model="taskForm.orderNum"
                />
                <image
                  v-show="taskForm.orderNum"
                  class="clear-btn"
                  @click="taskForm.orderNum = ''"
                  src="../../static/img/clear.png"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-title">
        <view class="icon-style el-icon-ali-note-1"></view>
        <view class="title">注意事项</view>
      </view>
      <view class="card-content">
        <view class="uni-list">
          <checkbox-group @change="checkboxChange">
            <label
              class="uni-list-cell uni-list-cell-pd"
              v-for="(item, index) in noteMatterList"
              :key="index"
            >
              <view>
                <checkbox
                  class="check-box"
                  style="transform:scale(0.7)"
                  color="#FF5001"
                  :value="item.value"
                  :checked="item.checked"
                />
                <span style="vertical-align: middle;" v-if="index == 0"
                  >已确认使用绑定的“<span
                    class="other-font"
                    style="font-size: 40upx;"
                    >{{ list.tb_name }}</span
                  >”账号下单</span
                >
                <span style="vertical-align: middle;" v-else-if="index == 1"
                  >已确认<span class="other-font">未使用</span
                  >信用卡/花呗方式下单</span
                >
                <span style="vertical-align: middle;" v-else-if="index == 2"
                  >已确认下单金额以及下单要求符合<span class="other-font"
                    >任务要求</span
                  ></span
                >
              </view>
            </label>
          </checkbox-group>
        </view>
      </view>
    </view>
    <u-modal
      :showModal="isShowModal"
      title="提示"
      :showCancel="false"
      :confrimTitle="Dtime ? `确认（${Dtime}）` : `确认`"
      @confirmModal="Dtime ? '' : (isShowModal = false)"
    >
      <view>
        <view
          class="match-modal-title"
          style="color:red;font-size:5vw;font-weight: 548;"
          >注：差额正负50可以下单 ！</view
        >
        <!-- <view class="match-modal-countdown">倒计时：{{ countdownNum }}</view> -->
        <view class="match-modal-task-info" style="font-size:3.4vw"
          >拍下单价：<text style="color: red;">{{ list.pay_money/list.buy_num }}</text></view
        >
        <view class="match-modal-task-info" style="font-size:3.4vw"
          >拍下数量：<text style="color: red;">{{ list.buy_num }}</text
          >件</view
        >
        <view class="match-modal-task-info" style="font-size:3.4vw"
          >付款金额：<text style="color: red;">{{ list.all_money/list.buy_num }}</text></view
        >
        <view class="match-modal-task-info" style="font-size:3.4vw"
          >商品规格：<text style="color: red;" v-if="list.sku">{{
            list.sku
          }}</text></view
        >
        <scroll-view scroll-y="true" class="match-modal-task-info" style="color:red;font-size:4.8vw;line-height:8vw;height:160px;">
            商家要求（请严格按照商家要求下单）：<text style="font-size:4vw;font-weight: 700;">{{ list.remark }}</text>
        </scroll-view>
        <!-- <view class="match-modal-tips">注：仔细阅读商家要求，未按照要求做的可能会影响返款</view> -->
      </view>
    </u-modal>
    <u-modal
      :showModal="isShowTipsModal"
      title="温馨提示"
      :showCancel="false"
      @confirmModal="isShowTipsModal = false"
    >
      <view style="text-align: center;">
        <view>请务必用当前绑定的账号</view>
        <view style="font-size: 44upx;color: red;margin: 20upx 0;">{{
          list.tb_name
        }}</view>
        <view>进行下单</view>
      </view>
    </u-modal>
    <u-modal
      :showModal="showGiveUpTaskModal"
      title="放弃任务"
      @cancleModal="showGiveUpTaskModal = false"
      @confirmModal="taskGiveUp"
    >
      <view>
        <view class="uni-list">
          <radio-group @change="reasonChange">
            <label
              class="uni-list-cell uni-list-cell-pd"
              v-for="(item, index) in giveUpReason"
              :key="index"
            >
              <view style="margin-bottom: 8px;">
                <view style="display: inline-block;">
                  <radio
                    :value="item.value"
                    style="transform:scale(0.8)"
                    :checked="index === checkReason"
                  />
                </view>
                <view style="display: inline-block;vertical-align: middle;">{{
                  item.name
                }}</view>
              </view>
            </label>
          </radio-group>
        </view>
      </view>
    </u-modal>
    <u-modal
      :showModal="showMsg"
      title="提示"
      :content="msg"
      :showCancel="false"
      @confirmModal="onHideMsg"
    ></u-modal>
    <u-modal
      :showModal="isShowPddExamples"
      title="复制商品链接方法"
      :showCancel="false"
      @confirmModal="isShowPddExamples = false"
    >
      <view>
        <view>第一步</view>
        <view
          ><image
            style="width: 100%;height: 200upx;"
            src="../../static/img/pdd_examples_img_1.png"
            mode=""
          ></image
        ></view>
        <view>第二步</view>
        <view
          ><image
            style="width: 100%;height: 400upx;"
            src="../../static/img/pdd_examples_img_2.png"
            mode=""
          ></image
        ></view>
      </view>
    </u-modal>
    <button
      v-if="unflag"
      class="sumbit-btn"
      :loading="loading"
      :disabled="loading"
    >
      提交任务({{ untime }} S)
    </button>
    <button
      v-else
      class="sumbit-btn"
      :loading="loading"
      :disabled="loading"
      @click="submitTask"
    >
      提交任务
    </button>
  </view>
</template>

<script>
import {
  apiSaleFlowTaskDetail,
  apiUploadToken,
  apiGiveUpTask,
  apiInquiryTbGoodsName,
  apiSubmitTiktokSalesTask,
} from "../../../http/apis.js";
import { mapState } from "vuex";
import qiniuUploader from "../../components/qiniu/qiniuUploader.js";
import pyconst from "../../components/pyconst/vue-py.js";
import uModal from "../../components/uni-modal/uni-modal.vue";
export default {
  computed: {
    ...mapState(["token"]),
  },
  components: {
    uModal,
  },
  data() {
    return {
      Dtime: 5,
      Dtimer: null,
      msg: "",
      showMsg: false,
      list: {},
      stickType: 3,
      stickTypeData: {
        1: "请复制商品标题进行核对",
        2: "请复制商品链接进行核对",
        3: "请复制抖口令进行核对",
        4: "请复制店铺名进行核对",
      },
      checkBtnTitle: {
        1: "核对标题",
        2: "核对链接",
        3: "核对抖口令",
        4: "核对店铺名",
      },
      noteMatterList: [
        {
          value: "termOne",
          name: "已确认使用绑定的",
          checked: false,
        },
        {
          value: "termTwo",
          name: "已确认未使用信用卡/花呗/京东白条/淘客方式下单",
          checked: false,
        },
        {
          value: "termThree",
          name: "已确认下单金额以及下单要求符合任务要求",
          checked: false,
        },
      ],
      noteMatterStatus: false,
      showGiveUpTaskModal: false,
      giveUpReason: [
        {
          value: "2",
          name: "不想做了",
        },
        {
          value: "1",
          name: "找不到商品",
        },
        {
          value: "3",
          name: "现在没时间做",
        },
        {
          value: "4",
          name: "不能满足商家的要求",
        },
        {
          value: "5",
          name: "任务有问题（可联系QQ客服）",
        },
        {
          value: "7",
          name: "没有本金做任务",
        },
      ],
      checkReason: 0,
      pyArr: [],
      isLetter: false,
      keywordOptType: 1,
      isShowPddExamples: false,
      isShowModal: false,
      isShowTipsModal: false,
      taskForm: {
        token: "",
        pushTaskId: "",
        termOne: 1,
        termTwo: 1,
        termThree: 1,
        termFour: 1,
        shopStatus: "",
        payImg: "",
        otherPays: [],
        otherPay: "",
        orderNum: "",
      },
      uploadToken: "",
      matchTextStatus: "", //商品详情五个字
      writeCenterText: "",
      originalCenterText: "",
      originalAfterText: "",
      originalBeforeText: "",
      storeName: {
        1: "淘宝",
        2: "天猫",
        3: "京东",
        4: "阿里巴巴",
        13: "个性化",
        15: "拼多多",
        20: "抖音",
      },
      storeName2: {
        1: "淘宝任务（请打开淘宝APP下单）",
        2: "淘宝任务（请打开淘宝APP下单）",
        3: "京东任务（请打开京东APP下单）",
        4: "阿里巴巴任务（请打开1688APP下单）",
        13: "个性化任务",
        15: "拼多多任务（请打开拼多多APP下单）",
        20: "抖音任务",
      },
      // storeName:{
      //   1: '淘宝',
      //   2: '天猫',
      //   3: '京东',
      //   4: '1688',
      //   13: '唯品会',
      //   15: '拼多多'
      // },
      entranceName: {
        1: "关键词",
        2: "抖口令",
        4: "视频链接",
        5: "店铺名",
      },
      countdownNum: 50,
      checkTimer: null,
      timer: null,
      taskHourTime: "00",
      taskSecondTime: "00",
      taskMinuteTime: "00",
      pushTaskId: "",
      giveUpForm: {
        token: "",
        pushTaskId: "",
        giveUpType: 2,
      },
      tbPassword: "",
      loading: false,
      untime: 30,
      untimer: null,
      unflag: false,
      unNum: 0,
      tbTm: [1, 2, 20],
      copyShowType: [1, 2, 4, 5],
      otherShopType: [1, 2, 3, 13, 15],
      shopDetailText: [1, 2, 3, 13, 15],
      shopNameText: "",
      checkShopName: "",
      checkShopNameStatus: true,
      shopNameConfig: 1,
      wrapPlanId: null,
    };
  },
  watch: {
    isShowModal() {
      if (this.isShowModal == true) {
        this.Dtime = 5;
        this.Dtimer = setInterval(() => {
          this.Dtime--;
          if (this.Dtime <= 0) {
            this.Dtime = 0;
            clearInterval(this.Dtimer);
          }
        }, 1000);
      } else {
        this.Dtime = 0;
        clearInterval(this.Dtimer);
      }
    },
  },
  onShow() {
    this.platform = uni.getSystemInfoSync().platform;
  },
  onLoad(options) {
    this.pushTaskId = options.id;
    this.wrapPlanId = options.wrapPlan || null;
    this.taskForm.pushTaskId = this.pushTaskId;
    this.giveUpForm.pushTaskId = this.pushTaskId;
    this.giveUpForm.token = this.token;
    this.taskForm.token = this.token;
    clearInterval(this.timer);
    clearInterval(this.checkTimer);
    this.getTaskDetail();
    apiUploadToken({})
      .then((res) => {
        if (res.data.code == 1) {
          this.uploadToken = res.data.msg;
        }
      })
      .catch((res) => {
        this.$msg.showToast(res.data.msg);
      });
  },
  methods: {
    onHideMsg() {
      this.showMsg = false;
      setTimeout(() => {
        uni.switchTab({
          url: "../home/home",
        });
      }, 500);
    },
    submitCheckShopName() {
      if (!this.checkShopName) {
        this.$msg.showToast("请输入店铺名称");
        this.checkShopNameStatus = false;
        return;
      }
      if (this.checkShopName == this.shopNameText) {
        this.$msg.showToast("店铺核对成功");
        this.checkShopNameStatus = true;
      } else {
        this.$msg.showToast("店铺核对失败");
        this.checkShopNameStatus = false;
        return;
      }
    },


    submitTask() {
      if (this.shopNameConfig == 1) {
        if (!this.checkShopNameStatus) {
          this.$msg.showToast("请先核对店铺");
          return;
        }
      }

      if (!this.taskForm.otherPay || this.taskForm.otherPay.indexOf(" ") >= 0) {
        this.$msg.showToast("实付金额不能为空");
        return;
      }

      if (!this.taskForm.shopStatus) {
        this.$msg.showToast("请先核对商品");
        return;
      }

      if (this.taskForm.payImg == "") {
        this.$msg.showToast("请先上传付款截图");
        return;
      }
      if (this.taskForm.payImg.indexOf("payImg") < 0) {
        this.$msg.showToast("未获取到付款截图，请重新上传");
        return;
      }
      if (
        !this.taskForm.orderNum ||
        this.taskForm.orderNum.indexOf(" ") >= 0
      ) {
        this.$msg.showToast("订单号不能为空");
        return;
      }
      if (this.list.shop_type == 1 || this.list.shop_type == 2) {
        var orderNumberArr = [48];
        if (orderNumberArr.indexOf(this.taskForm.orderNum.length) < 0) {
          this.$msg.showToast("订单号填写错误");
          return;
        }
      }
      if (this.list.shop_type == 20) {
        if (this.taskForm.orderNum.length != 19) {
          this.$msg.showToast("订单号填写错误");
          return;
        }
      }
      if (this.shopDetailText.indexOf(this.list.shop_type) >= 0) {
        if (this.list.check_content) {
          if (this.writeCenterText == "") {
            this.$msg.showToast("请输入商品详情页文本的一个文字");
            return;
          }
          if (
            this.originalCenterText != this.writeCenterText.replace(/\s*/g, "")
          ) {
            this.$msg.showToast("商品详情页文本核对失败");
            return;
          }
        }
      }
      if (!this.noteMatterStatus) {
        this.$msg.showToast("注意事项要全选");
        return;
      }
      uni.showLoading({
        title: "提交中...",
        mask: true,
      });
      this.loading = true;
      this.taskForm.shopStatus = this.taskForm.shopStatus ? 1 : 2;

      apiSubmitTiktokSalesTask(this.taskForm)
          .then((res) => {
            uni.hideLoading();
            if (res.data.code == 1) {
              this.$msg.showToast(res.data.msg);
              setTimeout(() => {
                this.loading = false;
                uni.switchTab({
                  url: "./taskList",
                });
              }, 1000);
            } else if (res.data.code == 2025) {
              this.loading = false;
              this.$msg.showToast(res.data.msg);
            } else if (res.data.code == 2026) {
              this.loading = false;
              // this.$msg.showToast(res.data.msg)
              this.msg = res.data.msg;
              this.showMsg = true;
              // setTimeout(()=>{
              // 	uni.switchTab({
              // 		url: '../home/home'
              // 	});
              // },500)
            } else if (res.data.code == 2099) {
              this.$msg.showToast(res.data.msg);
              let _this = this;
              this.loading = true;
              this.unflag = true;
              this.unNum += 1;
              this.untimer = setInterval(function () {
                _this.untime--;
                if (_this.untime == 0) {
                  clearInterval(_this.untimer);
                  _this.untime = 30;
                  _this.loading = false;
                  _this.unflag = false;
                  if (_this.unNum == 3) {
                    _this.$msg.showToast({
                      title: "订单待付款",
                      duration: 3000,
                    });
                    _this.unNum = 0;
                  }
                }
              }, 1000);
              // this.$msg.showToast(res.data.msg)
            } else {
              this.loading = false;
              this.$msg.showToast(res.data.msg);
            }
          })
          .catch((res) => {
            uni.hideLoading();
            this.loading = false;
            this.$msg.showToast(res.data.msg);
          });

    },
    getTaskDetail() {
      apiSaleFlowTaskDetail({
        token: this.token,
        pushTaskId: this.pushTaskId,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.list = res.data.msg;
            this.shopNameText = this.list.shop_name;
            this.shopNameConfig = this.list.shop_name_config;
            this.checkShopNameStatus =
              this.shopNameConfig == "1" ? false : true;
            if (this.list.shop_type != 20) {
              this.isShowTipsModal = true;
            }
            if (this.list.shop_type == 1 || this.list.shop_type == 2) {
              this.stickType = parseInt(this.list.tkl_config);
            } else if (this.list.shop_type != 1 && this.list.shop_type != 2) {
              this.stickType = 4;
            } else {
              this.stickType = 2;
            }

            //商品标题进行处理
            let goodsTitle = "";
            for (let i in this.list.goods_title) {
              if ((parseInt(i) + 1) % 2 != 0) {
                goodsTitle += "*";
              } else {
                goodsTitle += this.list.goods_title[i];
              }
            }
            if (goodsTitle.length > 15) {
              goodsTitle = goodsTitle.substr(0, 20) + "...";
            }
            this.list.goods_title = goodsTitle;
            //店铺名称处理
            let shopName = "";
            for (let i in this.list.shop_name) {
              if ((parseInt(i) + 1) % 2 != 0) {
                shopName += "*";
              } else {
                shopName += this.list.shop_name[i];
              }
            }
            this.list.shop_name = shopName;
            //汉字转拼音
            var reg = /^[A-Za-z]+$/;
            if (reg.test(this.list.keyword)) {
              this.isLetter = true;
            } else {
              this.isLetter = false;
            }
            if (this.list.entrance_type == 1) {
              if (
                this.list.keyword.length > 6 ||
                this.list.keyword.indexOf(" ") >= 0
              ) {
                this.keywordOptType = 1;
              } else {
                this.keywordOptType =
                  this.list.keyword_config == 0 ? 1 : this.list.keyword_config;
                if (this.keywordOptType == 2) {
                  this.pyArr = pyconst.chineseToPinYin(this.list.keyword);
                }
              }
            }
            //商品详情五个字处理
            if (this.list.check_content) {
              this.originalBeforeText = this.list.check_content.substring(0, 2);
              this.originalAfterText = this.list.check_content.substring(3, 5);
              this.originalCenterText = this.list.check_content.substring(2, 3);
            }
            this.list.all_money = parseFloat(this.list.all_money).toFixed(2);
            // let goodsImg = this.list.goods_img;
            // if (goodsImg != null && goodsImg.indexOf("qiniu") != -1) {
            //   goodsImg = goodsImg + "?imageView2/2/w/200";
            // }
            // this.getNewGoodsImg(goodsImg);
            this.countTime(parseInt(this.list.task_over_time));
            this.countdownNum = this.list.count_down
              ? this.list.count_down
              : 60;
          } else if (res.data.code == 2024) {
            this.$msg.showToast(res.data.msg);
            setTimeout(() => {
              uni.switchTab({
                url: "../home/home",
              });
            }, 500);
          } else {
            this.$msg.showToast(res.data.msg);
            setTimeout(() => {
              uni.switchTab({
                url: "../home/home",
              });
            }, 500);
          }
        })
        .catch((res) => {
          this.$msg.showToast(res.data.msg);
        });
    },
    countTime(leftTime) {
      var that = this;
      var remain, hour, minute, second;
      remain = leftTime % 86400;
      hour = parseInt(remain / 3600);
      //计算分钟数
      remain = remain % 3600;
      minute = parseInt(remain / 60);
      //计算秒数
      second = remain % 60;
      that.timer = setInterval(function() {
        // var leftTime = end - now //时间差
        if (leftTime >= 0) {
          second = second - 1;
          if (second == -1) {
            second = 59;
            minute = minute - 1;
          } else if (minute == -1) {
            minute = 59;
            hour = hour - 1;
          }
          if (hour == 0 && minute == 0 && second == 0) {
            that.taskHourTime = "00";
            that.taskSecondTime = "00";
            that.taskMinuteTime = "00";
            clearInterval(that.timer);
            that.giveUpForm.giveUpType = 6;
            that.taskGiveUp();
            return;
          }
          that.taskHourTime = that.spliceTime(hour);
          that.taskSecondTime = that.spliceTime(second);
          that.taskMinuteTime = that.spliceTime(minute);
        } else {
          clearInterval(that.timer);
          that.giveUpForm.giveUpType = 6;
          that.taskGiveUp();
        }
      }, 1000);
    },
    spliceTime(time) {
      if (time < 10) {
        time = "0" + time;
      }
      return time;
    },
    taskGiveUp() {
      apiGiveUpTask(this.giveUpForm)
        .then((res) => {
          this.showGiveUpTaskModal = false;
          if (res.data.code == 1) {
            this.$msg.showToast("放弃成功");
            setTimeout(() => {
              uni.switchTab({
                url: "../home/home",
              });
            }, 500);
          } else {
            this.$msg.showToast(res.data.msg);
          }
        })
        .catch((res) => {
          this.$msg.showToast(res.data.msg);
        });
    },
    matchCenterText() {
      if (this.writeCenterText == "") {
        this.$msg.showToast("请输入商品详情页文本的一个文字");
        return;
      }
      if (this.originalCenterText == this.writeCenterText) {
        this.matchTextStatus = true;
      } else {
        this.matchTextStatus = false;
        this.$msg.showToast("核对失败");
      }
    },
    getNewGoodsImg(id,img) {
      let _this = this
      uni.getImageInfo({
        src: img,
        success: function(res) {
          //绘制背景图
          uni.getImageInfo({
            src: "../../static/img/msk_img.png",
            success: function(msk) {
              //绘制背景图
              let ctx = uni.createCanvasContext(id);
              ctx.drawImage(res.path, 0, 0, 100, 100);
              if (_this.list.shop_type != 20) {
                // 非抖音托N需要打码
                ctx.drawImage(msk.path, 30, 30, 40, 40);
              }
              ctx.draw();
            },
          });
        },
      });
    },
    copyKeyword(id) {
      if (this.keywordOptType == 1) {
        uni.setClipboardData({
          data: id,
          success: (data) => {
            this.$msg.showToast("复制成功");
          },
          fail: function(err) {},
          complete: function(res) {},
        });
      } else {
        this.$msg.showToast("请手动输入关键词到搜索框");
      }
    },
    checkCountdown() {
      this.checkTimer = setInterval(() => {
        this.countdownNum--;
        if (this.countdownNum <= 0) {
          this.clearCheckTimeOut();
          return;
        }
      }, 1000);
    },
    clearCheckTimeOut() {
      clearTimeout(this.checkTimer);
      this.isShowModal = false;
      this.checkTimer = null;
    },
    matchGoods() {
      if (!this.tbPassword) {
        this.$msg.showToast("请先输入需要核对的内容");
        return;
      }
      apiInquiryTbGoodsName({
        token: this.token,
        pushTaskId: this.pushTaskId,
        tbPassword: this.tbPassword,
        planType: this.list.plan_type, //1：销量 2：流量 3：评论
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.taskForm.shopStatus = true;
            this.$msg.showToast(res.data.msg);
            this.isShowModal = true;
            // this.checkCountdown();
          } else {
            this.taskForm.shopStatus = false;
            this.$msg.showToast(res.data.msg);
          }
        })
        .catch((res) => {
          this.$msg.showToast(res.data.msg);
        });
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["origial"],
        success: (res) => {
          this.uploadImg(res, res.tempFiles[0].size > 1570000);
        },
        fail: function() {
          this.$msg.showToast("载入图片失败，请稍后再试");
        },
      });
    },
    uploadImg(typeimg, fileSize) {
      var that = this;
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      uni.getImageInfo({
        src: typeimg.tempFilePaths[0],
        success(res) {
          let canvasWidth = res.width; //图片原始长宽
          let canvasHeight = res.height;
          let img = new Image();
          img.src = res.path;
          let canvas = document.createElement("canvas");
          let ctx = canvas.getContext("2d");
          let scale = res.height / res.width;
          canvas.width = fileSize == true ? 500 : canvasWidth;
          canvas.height = fileSize == true ? 500 * scale : canvasHeight;
          ctx.drawImage(
            img,
            0,
            0,
            fileSize == true ? 500 : canvasWidth,
            fileSize == true ? 500 * scale : canvasHeight
          ); //fileSize == true ? 300 : canvasHeight / 2

          canvas.toBlob(function(fileSrc) {
            let imgSrc = window.URL.createObjectURL(fileSrc);
            var random = Math.floor(Math.random() * (1000 - 1)) + 1;
            var timestamp = new Date().getTime();
            var name = imgSrc.substring(imgSrc.lastIndexOf("-") + 1);
            var key = name + random.toString() + timestamp.toString() + ".png";
            qiniuUploader.upload(
              imgSrc,
              (res) => {
                //图片上传完成后返回值
                that.taskForm.payImg = res.imageURL;
                that.$msg.showToast("上传成功");
              },
              (error) => {
                // resolve(error)
                uni.hideLoading();
                that.$msg.showToast("上传失败");
              },
              {
                region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
                domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
                key: "payImg/" + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
                // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
                uptoken: that.uploadToken, // 由其他程序生成七牛 uptoken
              },
              (res) => {
                //上传进度
                if (res.progress === 100) {
                  uni.hideLoading();
                }
              }
            );
          });
        },
        fail(err) {
          that.$msg.showToast(err.errMsg);
          uni.hideLoading();
        },
      });
    },
    checkboxChange: function(e) {
      var values = e.detail.value;
      for (var i = 0, lenI = this.noteMatterList.length; i < lenI; ++i) {
        const item = this.noteMatterList[i];
        if (values.includes(item.value)) {
          this.$set(item, "checked", true);
        } else {
          this.$set(item, "checked", false);
        }
      }
      values.length === 3
        ? (this.noteMatterStatus = true)
        : (this.noteMatterStatus = false);
    },
    getShopName(type) {
      return this.storeName[type];
    },
    getShopName2(type) {
      return this.storeName2[type];
    },
    reasonChange(evt) {
      for (let i = 0; i < this.giveUpReason.length; i++) {
        if (this.giveUpReason[i].value === evt.target.value) {
          this.checkReason = i;
          this.giveUpForm.giveUpType = this.giveUpReason[i].value;
          break;
        }
      }
    },
    showGiveUpModal() {
      this.showGiveUpTaskModal = true;
    },
    saveImg(url) {
      if (uni.getStorageSync("mobilePlatformType") == "APP") {
        uni.showLoading({
          title: "下载中",
          mask: true,
        });
        let filename = Math.random() + ".png";
        plus.downloader
          .createDownload(
            url,
            {
              filename: "_downloads/" + filename,
            },
            (download, status) => {
              if (status == 200) {
                //下载成功
                plus.gallery.save(download.filename, () => {
                  uni.hideLoading();
                  uni.showToast({
                    title: "下载成功！",
                  });
                });
              }
            }
          )
          .start();
      }
    },
    showImg(url) {
      window.location.href = url;
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f5f5f5;
}
#sales-task {
  .shop-name {
    font-size: 40upx !important;
    margin-bottom: 24upx;
    color: red !important;
    font-weight: bold !important;
    line-height: normal !important;
  }
  .task-time-box {
    display: flex;
    background: #ffefdc;
    padding: 20upx 32upx;
    align-items: center;
    margin-bottom: 20upx;
    .left-box {
      flex: 1;
      .title {
        font-size: 24upx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: $theme-color;
        line-height: 34upx;
      }
      .time-box {
        color: $theme-color;
        font-size: 20upx;
        margin: 18upx 0;
        .time {
          font-size: 20upx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 28upx;
          background: $theme-color;
          border-radius: 4upx;
          padding: 4upx;
        }
      }
      .account {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $theme-color;
        line-height: 28upx;
      }
    }
    .give-up-btn {
      width: 152upx;
      height: 60upx;
      font-size: 26upx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #ff5001;
      line-height: 60upx;
      border-radius: 30upx;
      border: 1px solid #ff5001;
      text-align: center;
    }
  }
  .card {
    padding: 20upx 30upx;
    background: #ffffff;
    margin: 0 30upx 12upx 30upx;
    border-radius: 24upx;
    .card-title {
      color: $theme-color;
      .icon-style {
        display: inline-block;
        margin-right: 10upx;
      }
      .title {
        display: inline-block;
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff5001;
        line-height: 28upx;
      }
    }
    .card-content {
      .card-row {
        border-top: 1px solid #e9e9e9;
        padding: 24upx 0;
      }
      .keyword-text {
        color: $theme-color;
        font-weight: 500;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        font-size: 30upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        width: 460upx;
      }
      .pinyin {
        margin-top: 10upx;
        .letter {
          margin-right: 16upx;
        }
      }
      .qrcode-box {
        border-bottom: 1px solid #e9e9e9;
      }
      .card-row-container {
        border-bottom: 1px solid #e9e9e9;
        padding: 24upx 0;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        display: flex;
        font-size: 28upx;
        .row-title {
          color: #666666;
          margin-right: 20upx;
          font-weight: 400;
        }

        .row-content {
          flex: 1;
          .black-style {
            font-weight: 500;
            color: #333333;
          }
          .theme-style {
            color: $theme-color;
            font-weight: 500;
          }
          .copy-btn-box {
            text-align: right;
            margin-top: 10upx;
            .copy-btn {
              font-size: 22upx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 32upx;
              background: #f5f5f5;
              border-radius: 18upx;
              padding: 3px 20upx;
              display: inline-block;
            }
          }
        }
      }
      .goods-title {
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 32upx;
        margin-top: 24upx;
      }
      .goods-info {
        margin-top: 32upx;
        display: flex;
        .goods-img,
        #firstCanvas {
          width: 220upx;
          height: 220upx;
        }
        .goods-param-box {
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
          line-height: 26upx;
          display: inline-block;
          margin-left: 32upx;
          vertical-align: top;
          .goods-param:nth-child(1),
          .goods-param:nth-child(2),
          .goods-param:nth-child(3) {
            margin-bottom: 26upx;
          }
          .goods-param {
            font-size: 28upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 28upx;
            .content {
              color: #333333;
            }
            .content-price {
              color: $theme-color;
            }
          }
        }
      }
      .note {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 44upx;
      }
      .qrcode-img {
        width: 260upx;
        height: 260upx;
        margin: 20upx auto;
      }
      .require-box {
        display: flex;
        .require-icon {
          color: $theme-color;
          display: inline-block;
          font-size: 24upx;
          margin-right: 10upx;
          margin-top: 4upx;
        }
        .require-content {
          display: inline-block;
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $theme-color;
          line-height: 36upx;
        }
      }
      .shop-name-box {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 40upx;
        margin-bottom: 26upx;
        margin-top: 24upx;
        .name {
          font-weight: 500;
          color: #333333;
        }
      }
      .tips {
        font-size: 24upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $theme-color;
        line-height: 24upx;
        margin-top: 10upx;
      }
      .marginStyle {
        margin: 20upx 0;
      }
      .step {
        color: red;
        .click-icon {
          display: inline-block;
          font-size: 28upx;
        }
        .step {
          display: inline-block;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 28upx;
          margin-top: 28upx;
        }
      }
      .card-input-box {
        display: flex;
        margin-top: 12upx;
        align-items: center;
        .input-box {
          position: relative;
          flex: 1;
        }
        .input {
          height: 72upx;
          background: #ffffff;
          border-radius: 10upx;
          border: 1px solid #dfdfdf;
          padding-left: 32upx;
          font-size: 28upx;
        }

        .clear-btn {
          width: 34upx;
          height: 34upx;
          position: absolute;
          right: 4upx;
          top: 12upx;
          padding: 10upx;
          background: #fff;
        }
        .check-btn {
          width: 200upx;
          height: 72upx;
          background: #ff8c00;
          border-radius: 10upx;
          font-size: 28upx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 72upx;
          margin-left: 20upx;
        }
      }

      .small-title {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        color: #666666;
        font-weight: 400;
        margin-right: 12upx;
      }
      .center-text-box {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
        .center-text-input {
          width: 160upx;
          height: 72upx;
          background: #ffffff;
          border-radius: 10upx;
          border: 1px solid #dfdfdf;
          padding-left: 32upx;
          font-size: 28upx;
          display: inline-block;
          vertical-align: middle;
          margin: 0 16upx;
        }
      }
      .upload-img-box {
        width: 400upx;
        margin-top: 20upx;
        margin-bottom: 24upx;
        .upload-img {
          border: 1px dashed #e0e0e0;
          width: 400upx;
        }
        .upload-icon {
          border: 1px dashed #e0e0e0;
          width: 320upx;
          height: 400upx;
          text-align: center;
          line-height: 400upx;
          font-size: 60upx;
          color: #949494;
        }
      }
      .uni-list {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 36upx;
        .uni-list-cell {
          margin-right: 0 !important;
          margin-bottom: 24upx;
          .other-font {
            color: $theme-color;
          }
        }
      }
    }
  }
  .sumbit-btn {
    margin: 32upx;
    height: 96upx;
    background: $theme-background-color;
    border-radius: 10upx;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 96upx;
    margin-top: 48upx;
  }
  .match-modal-title {
    font-size: 28upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: $theme-color;
    margin-bottom: 10upx;
  }
  .match-modal-countdown {
    text-align: center;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    color: $theme-color;
    margin: 20upx 0;
  }
  .match-modal-task-info {
    font-size: 26upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 10upx 0;
  }
  .match-modal-tips {
    font-size: 26upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: $theme-color;
    padding: 10upx 0;
  }
}
</style>
